<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="dialogStyle"
      title="新建跟进"
      width="700"
      @close="handleClose"
      :beforeClose="handleClose"
    >
      <avue-form :option="formOption" v-model="formParams" ref="ruleFormRef">
      </avue-form>
      <div class="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button :loading="btnLoading" type="primary" @click="onSubmit"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script name="AccessForm" setup>
import { reactive, getCurrentInstance } from 'vue'
import useUserStore from '@/store/modules/user'
import { getQuestion, saveTerminalAccess } from '@/api/terminal/index'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const props = defineProps({
  // userStore
  dialogParam: {
    required: true
  }
})
const data = reactive({
  dialogVisible: false,
  formParams: {
    followDetailList: []
  }
})
const { dialogVisible, formParams } = toRefs(data)
const { followup_method } = proxy.useDict('followup_method')
const btnLoading = ref(false)
watch(
  () => props.dialogParam,
  val => {
    if (
      JSON.stringify(props.dialogParam) != '{}' &&
      props.dialogParam.isVisible
    ) {
      console.log(props.dialogParam, 'props.dialogParam')
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
async function init() {
  dialogVisible.value = props.dialogParam.isVisible
  formParams.value = {
    ...JSON.parse(JSON.stringify(props.dialogParam)),
    remindTime: proxy.parseTime(
      new Date(
        props.dialogParam.remindData
          ? new Date().getTime() +
            props.dialogParam.remindData * 24 * 60 * 60 * 1000
          : new Date().getTime()
      )
    )
  }
  console.log('formParams.value==>', formParams.value)

  getList()
}

const formOption = ref({
  // labelWidth: '10',
  labelPosition: 'top',
  menuSpan: 7,
  submitBtn: false,
  menuPosition: 'left',
  gutter: 30,
  emptyBtn: false,
  column: []
})
const modelArr = ref([])
const formType = {
  radio: 'radio',
  text: 'input',
  select: 'select',
  checkbox: 'checkbox',
  radioGroup: 'radioGroup',
  date: 'date',
  time: 'time',
  number: 'number',
  switch: 'switch',
  upload: 'upload',
  uploadFile: 'uploadFile'
}
const valArr = reactive([])
const getList = () => {
  formOption.value.column = [
    {
      label: '跟进方式',
      span: 12,
      prop: 'type',
      placeholder: '请选择跟进方式',
      type: 'select',
      multiple: false,
      dicData: followup_method,
      rules: [
        {
          required: true,
          message: '跟进方式',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '跟进时间',
      prop: 'followTime',
      type: 'datetime',
      span: 12,
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      placeholder: '请选择跟进时间',
      rules: [
        {
          required: true,
          message: '跟进方式',
          trigger: 'blur'
        }
      ]
    }
  ]
  getQuestion().then(res => {
    modelArr.value = res.data
    modelArr.value.forEach((item, index) => {
      formOption.value.column.push({
        label: item.question,
        span: 24,
        prop: `val${index}`,
        placeholder: item.question,
        type: formType[item.type],
        multiple: false,
        dicData: item.answerArr,
        change: ({ column, value }) => {
          valArr[index] = {
            value: value,
            question: column.label
          }
        },
        rules: [
          {
            required: item.required,
            message: item.question,
            trigger: ['blur', 'change']
          }
        ]
      })
    })
  })
}

// 保存
const onSubmit = () => {
  proxy.$refs['ruleFormRef'].validate(async (valid, done, msg) => {
    if (valid) {
      formParams.value.followDetailList = valArr
      saveTerminalAccess(formParams.value).then(res => {
        proxy.$modal.msgSuccess('保存成功！')
        handleClose()
      })
      done()
    }
  })
}

const emit = defineEmits(['close'])
// 取消
function handleClose() {
  btnLoading.value = false
  dialogVisible.value = false
  proxy.$refs['ruleFormRef'].resetFields()
  formParams.value = {
    followDetailList: []
  }
  valArr.value = []
  emit('close', 'followUp')
}
</script>
<style lang="scss">
.dialogStyle {
  border-radius: 10px;
  .el-dialog__header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    @apply mr-0  text-#666 font-semibold bg-#f5f5f5;
  }
  .footer {
    @apply text-right border-t border-t-solid border-gray-100 pt-20px mt-20px;
  }
}
</style>
